<template>
  <div class="patrol-detail">
    <div v-for="(item, index) in elementList" :key="index">
      <div class="title">
        <span>{{ index + 1 }}.</span>{{ item.d1104 }}：
      </div>
      <a-radio-group v-model="form1[item.key]" direction="horizontal">
        <a-radio
          v-for="(el, elIndex) in item.child || []"
          :key="elIndex"
          :value="String(el.d1201)"
          >{{ el.d1202 }}</a-radio
        >
      </a-radio-group>
    </div>
    <div class="title">
      <span>{{ elementList.length + 1 }}.</span>健康状态：
    </div>
    <a-radio-group v-model="form1[4]" direction="horizontal" icon-size="16px">
      <a-radio value="9">正常</a-radio>
      <a-radio value="10">异常</a-radio>
    </a-radio-group>
    <div class="title">
      <span>{{ elementList.length + 2 }}.</span>健康异常严重程度：
    </div>
    <a-radio-group v-model="form1[5]" direction="horizontal" icon-size="16px">
      <a-radio value="11">紧急处理</a-radio>
      <a-radio value="12">一般隐患</a-radio>
    </a-radio-group>
    <div class="title">
      <span>{{ elementList.length + 3 }}.</span>健康异常描述：
    </div>
    <div class="desc">{{ form2.exceptionDesc || "--" }}</div>
    <template v-if="imgList.length">
      <div class="title">
        <span>{{ elementList.length + 4 }}.</span>现场情况：
      </div>
      <ul class="photograph">
        <li v-for="(item, index) in imgList || []" :key="index">
          <img :src="item.src" @click="checkView(item)" />
          <p @click="exportFile(item)">文件下载</p>
        </li>
      </ul>
    </template>

    <a-modal
      title="视频"
      v-model="videoShow"
      centered
      width="880px"
      destroyOnClose
      :footer="null"
    >
      <div class="ry-video-wrap">
        <video ref="videoPlayer" class="video-js">
          <p class="vjs-no-js">不支持播放</p>
        </video>
      </div>
    </a-modal>
  </div>
</template>
<script>
import { getPatrolDetail } from "@/services/system/whdngxlApi";
import fileType from "@/mixins/fileType.js";
export default {
  name: "PatrolChildDetail",
  mixins: [fileType],
  data() {
    return {
      elementList: [],
      form1: {},
      form2: {},
      imgList: [],
      videoShow: false,
    };
  },
  mounted() {},
  methods: {
    initData(data) {
      this.$nextTick(() => {
        if (data) {
          this.getElementList(data);
        }
      });
    },
    getElementList(data) {
      this.$http
        .post(getPatrolDetail, { busiBigFlag: "01", d0401: data.d0401 })
        .then((res) => {
          if (res.code == "0") {
            debugger
            let info = res.result || {};
            this.form1 = info.form1 || {};
            this.form2 = info.form2 || {};
            this.elementList = info.elementList || [];
            this.getImgList(info.materialList || []);
          } else {
            this.$notification.error({
              message: "提示",
              description: res.message || res.msg,
              duration: 4,
            });
          }
        });
    },
    getImgList(list) {
      if (!list.length) return;
      this.imgList = list.map((el) => {
        return {
          ...this.getFileType(el.showId, el.fileSuffix),
          ...el,
        };
      });
    },
    // 查看图片或视频
    checkView(item) {
      if (item.type === "image") {
        this.$viewerApi({
          images: [item.src],
        });
      } else if (item.type === "video") {
        this.videoShow = true;
        this.$nextTick(() => {
          this.createVideo(item.showId);
        });
      }
    },
    createVideo(id) {
      let src =
        process.env.VUE_APP_FILE_BASE_URL + `/api/common/file/show/whdn/` + id;
      let options = {
        autoplay: false,
        controls: true,
        sources: [
          {
            src,
            type: "video/mp4",
          },
        ],
      };
      this.$video(this.$refs.videoPlayer, options);
    },
    // 文件下载
    exportFile(item) {
      let a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", true); // download属性
      a.setAttribute("target", "_blank"); // download属性
      a.setAttribute(
        "href",
        `${process.env.VUE_APP_FILE_BASE_URL}/api/common/file/show/whdn/${item.showId}`
      ); // href链接
      a.click(); // 自执行点击事件
      document.body.removeChild(a);
    },
  },
};
</script>

<style lang="less" scoped>
.patrol-detail {
  max-height: calc(100vh - 280px);
  overflow: auto;
  .title {
    padding: 10px 0;
    font-size: 16px;
  }
  .desc {
    width: 80%;
    min-height: 96px;
    line-height: 24px;
    padding: 8px;
    border: 1px solid #3e9fc8;
    border-radius: 8px;
  }
  .photograph {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    li {
      flex: 0 0 auto;
      width: 120px;
      margin-right: 15px;
      margin-bottom: 15px;
      img {
        width: 120px;
        height: 90px;
        margin-right: 15px;
        margin-top: 15px;
        border-radius: 8px;
        cursor: pointer;
      }
      p {
        width: 120px;
        margin-top: 10px;
        color: #1492ff;
        text-align: center;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="less">
.ry-video-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
</style>